<template>
  <footer class="rich-input-footer">
    <div class="input-container">
      <div class="input-box">
        <button class="emoji-btn" @click="toggleEmojiPicker" title="表情" :class="{ active: showEmojiPicker }">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
            <path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <line x1="9" y1="9" x2="9.01" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <line x1="15" y1="9" x2="15.01" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>

        <div class="input-wrapper">
          <textarea
            ref="textareaRef"
            v-model="inputText"
            class="rich-textarea"
            placeholder="输入你的信息..."
            rows="1"
            @keydown.enter.exact.prevent="handleEnter"
            @keydown.shift.enter.exact="handleShiftEnter"
            @input="handleInput"
          ></textarea>
        </div>

        <button class="send-btn" :disabled="!canSend" @click="send">
          <svg v-if="!isLoading" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <line x1="22" y1="2" x2="11" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <polygon points="22 2 15 22 11 13 2 9 22 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <div v-else class="loading-spinner"></div>
        </button>
      </div>

      <div class="emoji-picker" v-if="showEmojiPicker">
        <div class="emoji-header">
          <span class="emoji-title">选择表情</span>
          <button class="emoji-close" @click="showEmojiPicker = false">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
        <div class="emoji-grid">
          <button
            v-for="emoji in emojiList"
            :key="emoji"
            class="emoji-item"
            @click="insertEmoji(emoji)"
          >
            {{ emoji }}
          </button>
        </div>
      </div>

      <div class="input-hint">按 Enter 发送，Shift + Enter 换行</div>
    </div>
  </footer>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'

const props = defineProps({
  isLoading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['send'])

const inputText = ref('')
const textareaRef = ref(null)
const showEmojiPicker = ref(false)

// 常用表情列表
const emojiList = [
  '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
  '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
  '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
  '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
  '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
  '👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '👏', '🙌', '👐',
  '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔',
  '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮️'
]

const canSend = computed(() => inputText.value.trim().length > 0 && !props.isLoading)

function toggleEmojiPicker() {
  showEmojiPicker.value = !showEmojiPicker.value
}

function insertEmoji(emoji) {
  const textarea = textareaRef.value
  if (textarea) {
    const start = textarea.selectionStart
    const end = textarea.selectionEnd
    const text = inputText.value
    inputText.value = text.substring(0, start) + emoji + text.substring(end)

    nextTick(() => {
      textarea.focus()
      textarea.setSelectionRange(start + emoji.length, start + emoji.length)
    })
  }
  showEmojiPicker.value = false
}

function handleEnter() {
  if (canSend.value) {
    send()
  }
}

function handleShiftEnter() {
  // Shift + Enter 换行，不发送
  const textarea = textareaRef.value
  if (textarea) {
    const start = textarea.selectionStart
    const text = inputText.value
    inputText.value = text.substring(0, start) + '\n' + text.substring(start)
    nextTick(() => {
      textarea.focus()
      textarea.setSelectionRange(start + 1, start + 1)
      autoResize()
    })
  }
}

function handleInput() {
  autoResize()
}

function autoResize() {
  const textarea = textareaRef.value
  if (textarea) {
    textarea.style.height = 'auto'
    textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px'
  }
}

function send() {
  if (!canSend.value) return
  const text = inputText.value.trim()
  if (!text) return

  inputText.value = ''
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto'
  }
  showEmojiPicker.value = false
  emit('send', text)
}

// 暴露聚焦方法
defineExpose({
  focus: () => {
    textareaRef.value?.focus()
  }
})

// 点击外部关闭表情选择器
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})

function handleClickOutside(event) {
  const target = event.target
  if (showEmojiPicker.value && !target.closest('.rich-input-footer')) {
    showEmojiPicker.value = false
  }
}
</script>

<style scoped>
.rich-input-footer {
  padding: 16px 24px 20px;
  background: #ffffff;
  border-top: 1px solid #eef0f5;
  position: relative;
}

.input-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.input-box {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.input-box:focus-within {
  background: #ffffff;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.emoji-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.emoji-btn:hover {
  background: #e5e7eb;
  color: #667eea;
}

.emoji-btn.active {
  background: #e0e7ff;
  color: #667eea;
}

.emoji-btn svg {
  width: 20px;
  height: 20px;
}

.input-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.rich-textarea {
  width: 100%;
  min-height: 36px;
  max-height: 200px;
  padding: 8px 0;
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
  color: #2b2f36;
}

.rich-textarea::placeholder {
  color: #9ca3af;
}

.send-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
}

.send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

.send-btn:active:not(:disabled) {
  transform: translateY(0);
}

.send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.send-btn svg {
  width: 18px;
  height: 18px;
}

.send-btn span {
  display: none;
}

.loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.emoji-picker {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 100;
  width: 320px;
  max-height: 280px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.emoji-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.emoji-title {
  font-size: 13px;
  font-weight: 600;
  color: #2b2f36;
}

.emoji-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9ca3af;
  transition: all 0.2s ease;
}

.emoji-close:hover {
  background: #f3f4f6;
  color: #6b7280;
}

.emoji-close svg {
  width: 16px;
  height: 16px;
}

.emoji-grid {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  overflow-y: auto;
  max-height: 240px;
}

.emoji-item {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.15s ease;
}

.emoji-item:hover {
  background: #f3f4f6;
  transform: scale(1.15);
}

.emoji-item:active {
  transform: scale(1.05);
}

.input-hint {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  padding: 0 4px;
}
</style>


